<template>
  <div class="person">
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人员管理</el-breadcrumb-item>
      <el-breadcrumb-item>患者列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row style="margin-bottom: 1%; margin-left: 1%">
      <!-- 已就诊按钮 -->
      <el-button :class="['custom-filter-btn', { 'is-active': stageFilter === '已就诊' }]" size="medium" type="success" round @click="filterBystage('已就诊')"> 已就诊 </el-button>

      <!-- 已预约按钮 -->
      <el-button :class="['custom-filter-btn', { 'is-active': stageFilter === '已预约' }]" size="medium" round type="warning" @click="filterBystage('已预约')"> 已预约 </el-button>

      <!-- 搜索患者的文本框 -->
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请输入姓名查询"
        v-model="queryInfo.query"
        clearable
        @clear="getPatientList"
        style="width: 220px; height: 28px; right: 10px; position: absolute"
      >
        <el-button slot="append" icon="el-icon-search" @click="getPatientList"></el-button>
      </el-input>
    </el-row>

    <el-card shadow="never" border="false">
      <!-- 卡片头部 -->
      <template #header>
        <div class="header">
          <span>共{{ total }}条记录</span>
          <el-button icon="el-icon-plus" size="small" type="danger" round @click="DialogVisible = true">添加患者</el-button>
        </div>
      </template>

      <!-- 患者信息展示 -->
      <el-table stripe :data="nursesList" style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="name" label="患者姓名"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="department" label="挂号科室"> </el-table-column>
        <el-table-column prop="type" label="挂号类别"> </el-table-column>
        <el-table-column prop="stage" label="就诊状态">
          <template slot-scope="scope">
            <div>
              <i :class="['el-icon', scope.row.stage === '已就诊' ? 'el-icon-circle-check' : 'el-icon-remove-outline']"></i>
              <span :style="{ color: scope.row.stage === '已就诊' ? 'green' : scope.row.stage === '已预约' ? '#ecbd12' : 'inherit' }">
                {{ scope.row.stage }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>

        <!-- 删除和编辑按钮 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="editPatient(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" style="color: red" @click="deleteUser(scope.row.id)">删除</el-button>
            <el-button
              v-if="scope.row.stage === '已预约'"
              @click="handleCheckIn(scope.row)"
              type="text"
              size="mini"
              icon="el-icon-check"
              :disabled="scope.row.checkedIn"
              :style="scope.row.checkedIn ? 'color: gray;' : ''"
              >签到</el-button
            >
            <el-button v-else-if="scope.row.checkedIn" type="text" size="small" icon="el-icon-remove" disabled>已签到</el-button>
            <el-button v-else type="text" size="small" icon="el-icon-remove" disabled>已签到</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageStart"
        :page-sizes="[3, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 添加患者的对话框 -->
      <el-dialog title="添加/编辑患者" :visible.sync="DialogVisible" width="30%" @close="addDialogClosed()">
        <el-form ref="addPatientFormRef" :model="newPatient" label-width="70px">
          <el-form-item label="患者姓名">
            <el-input v-model="newPatient.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item label="年龄">
                <el-input v-model="newPatient.age" placeholder="请输入年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input v-model="newPatient.sex" placeholder="请输入性别"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="挂号科室">
            <el-select v-model="newPatient.department" clearable>
              <el-option label="儿科" value="儿科" />
              <el-option label="内科" value="内科" />
              <el-option label="外科" value="外科" />
              <el-option label="妇产科" value="妇产科" />
            </el-select>
          </el-form-item>
          <el-form-item label="挂号类型">
            <el-select v-model="newPatient.type" clearable>
              <el-option label="急诊" value="急诊" />
              <el-option label="初诊" value="初诊" />
              <el-option label="复诊" value="复诊" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="newPatient.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="DialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser">确定</el-button>
          <!-- @click="submitNewDoctor" -->
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
  
  <script>
export default {
  name: 'Doctor',
  data() {
    return {
      isEditing: false, // 新增标识，判断当前操作是添加还是编辑
      nursesList: [],
      value: '', // 数组department用于存储科室
      value: '',
      total: 0,
      queryInfo: {
        query: '',
        query1: '',
        pageStart: 1,
        pageSize: 5,
      },
      DialogVisible: false, //对话框状态
      newPatient: {
        name: '',
        age: '',
        sex: '',
        department: '',
        type: '',
        phone: '',
      },
      stageFilter: '',
      stageValue: false,
      editDialogVisible: false,
    };
  },
  created() {
    this.getPatientList();
  },
  methods: {
    // 获取所有用户
    async getPatientList() {
      // 调用post请求
      const { data: res } = await this.$http.get('allPatient', {
        params: this.queryInfo,
      });
      this.nursesList = res.data; // 将返回数据赋值
      this.total = res.numbers; // 总个数
      console.log(this.total);
    },

    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getPatientList(); // 数据发生改变重新申请数据
    },

    // 监听pageStart改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageStart = newPage;
      this.getPatientList(); // 数据发生改变重新申请数据
    },

    // 删除按钮
    async deleteUser(id) {
      // 弹框
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err);
      // 成功删除为confirm 取消为 cancel
      if (confirmResult != 'confirm') {
        return this.$message.info('已取消删除');
      }
      const { data: res } = await this.$http.delete('deletePatient?id=' + id);
      if (res != 'success') {
        return this.$message.error('操作失败！！！');
      }
      this.$message.success('操作成功！！！');
      this.getPatientList();
    },

    // 监听添加用户
    addDialogClosed() {
      this.newPatient.age = '';
      this.newPatient.name = '';
      this.newPatient.sex = '';
      this.newPatient.department = '';
      this.newPatient.role = '';
      this.newPatient.phone = '';
    },

    // 添加用户
    addUser() {
      this.$refs.addPatientFormRef.validate(async valid => {
        if (!valid) return;
        // 确保姓名为汉字
        const isNameValid = /^[\u4e00-\u9fa5]+$/u.test(this.newPatient.name);
        if (!isNameValid) {
          this.$message.error('姓名必须为汉字');
          return;
        }
        let action = this.isEditing ? 'editPatient' : 'addNewPatient';
        if (action === 'addNewPatient') {
          const { data: res } = await this.$http.post('addPatient', this.newPatient);
          if (res != 'success') return this.$message.error('操作失败！！！');
          this.$message.success('操作成功！！！');
        } else {
          const { data: res } = await this.$http.put('editPatient', this.newPatient);
          if (res != 'success') return this.$message.error('操作失败！！！');
          this.$message.success('操作成功！！！');
        }
        //隐藏
        this.DialogVisible = false;
        this.getPatientList();
      });
    },

    // 展示修改框
    async editPatient(id) {
      const { data: res } = await this.$http.get('getUpPatientDate?id=' + id);
      this.newPatient = res;
      this.DialogVisible = true;
      this.isEditing = true;
    },

    // 按钮点击事件处理
    filterBystage(stage) {
      this.stageValue = !this.stageValue;
      if (this.stageFilter === stage) this.stageFilter = '';
      else this.stageFilter = stage;

      if (this.stageFilter) this.queryInfo.query1 = stage;
      else this.queryInfo.query1 = '';
      this.getPatientList();
    },

    //修改状态
    async handleCheckIn(info) {
      console.log(info);
      info.stage = '已就诊';
      const { data: res } = await this.$http.put(`upDatePatientStage?id=${info.id}&state=${info.stage}`);
      if (res != 'success') return this.$message.error('操作失败！！！');
      else this.$message.success('操作成功！！！');
    },
  },
};
</script>
  
<style lang="less" scoped>
.el-breadcrumb {
  margin-top: 10px;
  margin-bottom: 25px;
}
/// 已预约/已就诊按钮样式
.button-group button {
  transition: background-color 0.3s ease; // 保持原有的平滑过渡效果
}
.custom-filter-btn {
  &.el-button:not(.is-active):not(:hover) {
    // 特定类名下的按钮，非激活状态且鼠标未悬停时的颜色恢复
    background-color: #fff; // 或者你希望的默认背景色
    border-color: lightgray; // 边框颜色恢复
    color: inherit; // 文字颜色恢复
    box-shadow: 0 2px 12px 0 rgba(192, 193, 189, 0.558);
  }
}
/* 设置图标颜色 */
.el-table .el-table__body .cell .el-icon-circle-check {
  color: green;
}
.el-table .el-table__body .cell .el-icon-remove-outline {
  color: #ecbd12;
}
//分页样式
.el-pagination {
  margin-top: 20px; //上边距
  text-align: center; //字体居中
}
// 职称科室选择器样式
.el-select {
  width: 200px;
  height: 10px;
  margin-right: 66px;
}
//表格样式
.el-card {
  margin-top: 25px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
  }
}
</style>